<template>
	<view class="content">
		
		<view class="app-title ac">
			<view class="fl" @click="back">
				<image class="back" src="/static/img/back.png"></image>
			</view>运营周/月报
		</view>

		<view class="my-work ac">
			<view class="fl menu ac"><view :class="{on:search_list.option == 0}" @click="setTab(0)"><b>全部</b></view></view>
			<view class="fl menu ac"><view :class="{on:search_list.option == 1}" @click="setTab(1)"><b>周报</b></view></view>
			<view class="fl menu ac"><view :class="{on:search_list.option == 2}" @click="setTab(2)"><b>月报</b></view></view>
			<!-- <view class="fl menu ac"><text :class="{on:tab == 3}" @click="setTab(3)"><b>日报</b></text></view> -->
			<view class="fl menu ac" @click="show_search = true"><view>筛选<image class="select"
						src="/static/img/select.png"></image></view></view>
			<view class="clearfix"></view>
		</view>

		<view class="work-item">
			<view class="item" @click="jumpDetail(item.id)" v-for="(item,index) in list" :key="index">
				<view class="item_top" >
					<view class="item_top_name">运营{{item.rtype}}第{{item.num}}期</view>
					<view >
						<image mode='aspectFit' class="icon" src="/static/img/arrow.png"></image>
					</view>
				</view>
				<view class="item_bottom_title">{{item.rdate}}</view>
			</view>
			<!-- <view class="item" @click="jumpDetail">
				<view class="item_top" >
					<text class="item_top_name">运营周报2021年第22周</text>
					<text >
						<image mode='aspectFit' class="icon" src="/static/img/arrow.png"></image>
					</text>
				</view>
				<view class="item_bottom_title">2021-08-06 12:37:09</view>
			</view>
			<view class="item" @click="jumpDetail">
				<view class="item_top" >
					<text class="item_top_name">运营周报2021年第23周</text>
					<text >
						<image mode='aspectFit' class="icon" src="/static/img/arrow.png"></image>
					</text>
				</view>
				<view class="item_bottom_title">2021-08-06 12:37:09</view>
			</view> -->
		</view>

		<MyMonthlyDrawer v-show="show_search" @closeFull="closeFull"></MyMonthlyDrawer>
	</view>
</template>

<script>
	import MyMonthlyDrawer from '../../components/myMonthly/myMonthlyDrawer'
	export default {
		components: {
			MyMonthlyDrawer
		},
		data() {
			return {
				tab: 0,
				start: '',
				end: '',
				list : [],
				search_list : {
					num:'',
					option:0,
					page:0,
					year:''
				},
				show_search: false,
				flog:true
			}
		},
		onReachBottom() {
			if(!this.flog) return uni.showToast({title:'已无最新数据',icon:'none'});
			this.initList();
		},
		created() {
			this.initList();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			setTab(i) {
				if (this.search_list.option == i) return;
				this.search_list.option = i;
				this.search_list.num = '';
				this.search_list.page = 0;
				this.search_list.year = '';
				this.flog = true;
				this.list = [];
				this.initList();
			},
			jumpDetail(id) {
				uni.navigateTo({
					url: '/pages/monthly/detail?id='+id
				});
			},
			closeFull(obj) {
				if (obj) {
					this.search_list.year = obj.year;
					this.search_list.num = obj.group;
				}
				this.show_search = false;
				this.search_list.page = 0;
				this.flog = true;
				this.list = [];
				this.initList();
			},
			initList() {
				this.fetch('GET',this.baseUrl()+'/ReportController/queryReport',this.search_list,true).then((res)=>{
					if(res.returnCode == 1) {
						this.list = this.list.concat((res.data.content))
						this.search_list.page++;
						if(res.data.content.length != 10) this.flog = false;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.my-work {
		background: #fff;margin-bottom: 16px;box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
	}
	.my-work>.menu {
		/* width: 19%; */width: 24%;color: #3E3A39;line-height: 54px;position: relative;
	}	
	.my-work>.menu:nth-child(5) {
		border-left: 1px solid #d7d7d7;width: 24%;
	}
	.my-work>.menu view{
		display: inline-block;
	}
	.my-work>.menu>.on {
		color: #307BE0;border-bottom: 2px solid #307BE0;
	}
	.work-item>.item .icon{
		width: 14px;height: 14px;vertical-align: middle;
	}
	.my-work>.menu>.num {
		position: absolute;top: 10px;right: 3%;background: #FA5151;width: 15px;height: 15px;font-size: 10px;border-radius: 50%;color: #fff;line-height: 14px;
	}
	.select {
		width: 15px;height: 15px;margin-left: 5px;vertical-align: middle;
	}
	.work-item {
		width: 91.5%;margin: 0 auto;
	}
	.work-item>.item {
		background: #FFFFFF;box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);border-radius: 6px;padding: 16px;font-size: 14px;margin-bottom: 16px;color: #3E3A39;position: relative;
	}
     .work-item>.item >.item_top{
		 display: flex;justify-content: space-between;align-items: center; 
	}
	.work-item>.item>.item_bottom_title{
		font-size: 16px;color: rgba(62, 58, 57, 0.7);margin-top: 10px;
	}
	.work-item>.item >.item_top>.item_top_name{
		 color: #3E3A39;font-size: 18px;font-weight: bold;
	}
	.work-item>.item>.name {
		margin-bottom: 10px;
	}
	.work-item>.item>view:nth-child(2) {
		margin-bottom: 6px;
	}
	.work-item>.item>.item-status {
		position: absolute;width: 60px;height: 60px;right: 0;bottom: 0;
	}
	.search-date {
		line-height: 40px;background: rgba(237, 150, 59, 0.1);box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);padding: 0 16px;
	}
	.search-date .close {
		width: 13px;height: 13px;
	}
</style>
